<template>
  <div style="height: auto">
    <!-- 头部搜索 -->
    <el-card style="width: 100%; margin-bottom: 10px" shadow="never">
      <el-row>
        <el-col :span="2">
          <el-input
            v-model="username"
            style="width: 120px"
            placeholder="Please username"
            size="small"
          >
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-input
            v-model="username"
            style="width: 120px"
            placeholder="请输入用户名"
            size="small"
          >
          </el-input>
        </el-col>

        <el-col :span="2">
          <el-input
            v-model="input"
            style="width: 120px"
            placeholder="Please input"
            size="small"
          />
        </el-col>

        <el-col
          style="display: flex; justify-content: flex-end; align-items: center"
          :span="2"
        >
          <el-space :size="20">
            <el-button type="primary" plain size="small">搜索</el-button>
            <el-button type="danger" plain size="small">重置</el-button>
          </el-space>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格数据展示 EEF7FD -->
    <el-card style="width: 100%; background: #eef7fd" shadow="never">
      <div style="margin-bottom: 10px">
        <el-button
          v-has="`btn:user:add`"
          @click="handleAddUser"
          plain
          size="small"
          type="primary"
          >新增</el-button
        >
      </div>

      <!-- #A2CBF8 -->
      <el-table :data="tableData" border style="width: 100%">
        <!-- <el-table-column
          prop="dispatchingnumber"
          label="城市"
          width="110"
          align="center"
        /> -->
        <el-table-column
          prop="ordernumber"
          label="送货单号"
          width="100"
          align="center"
        />
        <el-table-column
          prop="number"
          label="销售单号"
          width="100"
          align="center"
        />
        <el-table-column
          prop="timeWindowDateFrom"
          label="预约时间"
          align="center"
          width="120"
        >
          <template #default="scope">
            {{ scope.row.timeWindowDateFrom }}({{ scope.row.period }})
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="period"
          label="时段"
          width="50"
          align="center"
        /> -->

        <el-table-column
          prop="name"
          label="用户名"
          width="150"
          align="center"
        />
        <el-table-column prop="tags" label="电话" width="100" align="center" />  
        <el-table-column prop="phone" label="电话" width="200" align="center" />

        <el-table-column prop="address" label="地址" align="center" />
        <!--        
        <el-table-column
          prop="tag"
          label="电话"
          width="120"
          align="center"
        /> -->

        <el-table-column
          prop="totalVolume"
          label="总体积"
          width="80"
          align="center"
        />

        <el-table-column
          prop="totalWeight"
          label="总重量"
          width="80"
          align="center"
        />
        <el-table-column
          prop="totalquantity"
          label="总计(件)"
          width="60"
          align="center"
        />

        <el-table-column prop="state" label="购买商店" align="center" width="60"
          >466</el-table-column
        >
        <el-table-column prop="state" label="发货商店" align="center" width="60"
          >418</el-table-column
        >
        <el-table-column
          prop="zxstorage"
          label="自选件数"
          align="center"
          width="60"
        />
        <el-table-column
          prop="wcstorage"
          label="内仓件数"
          align="center"
          width="60"
        />
        <el-table-column
          prop="state"
          label="外仓订单号"
          align="center"
          width="80"
        >
          1
        </el-table-column>

        <el-table-column label="检验码" align="center" width="60">
          更新
        </el-table-column>
        <el-table-column prop="state" label="状态" width="60" align="center" />
        <el-table-column prop="state" label="操作" align="center" width="80">
          <template #default="scope">
            <el-button
              :icon="User"
              type="primary"
              size="small"
              v-has="`btn:user:per:role`"
              @click="handleRole(scope.row)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div style="margin-top: 10px">
        <el-pagination
          :current-page="pageNo"
          :page-size="pageSize"
          :small="small"
          :disabled="disabled"
          layout="total, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>
  
  <script setup>
import { ref, onMounted } from "vue";

import { findOrderList } from "@/api/order";

const tableData = ref([]);
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);

const ordDto = ref({
  vehicleTel: "18380343225",
  times: "",
});

onMounted(() => {
  console.log("123123");
  getList();
});

const getList = () => {
  findOrderList(ordDto.value).then((res) => {
    if (res.code === 200 && res.data !== null) {
      tableData.value = res.data;
    }
  });
};
</script>
<style scoped>
/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent !important;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent !important;
  border: 0;
  color: #135294;
}
/*去除底边框*/
::v-deep.el-table td.el-table__cell {
  border: 0;
}
::v-deep.el-table th.el-table__cell.is-leaf {
  border: 0;
}
/*去除底部灰条.el-table::before*/
::v-deep .el-table::before {
  display: none;
}
</style>